<template>
    <div id="app">
      <h2>{{ message }}</h2>
      <el-upload
        action
        accept=".xlsx, .xls"
        :auto-upload="false"
        :show-file-list="false"
        :on-change="handle"
      >
        <el-button type="primary">打开excel</el-button>
      </el-upload>
    </div>
  </template>
  
  <script setup>
  import { ref } from "vue";
  import Excel from 'exceljs'
  
  const message = ref(" XLSX 的使用");
  const handle = async (ev) => {
    let file = ev.raw;
    console.log(file);
    if (!file) {
      console.log("文件打开失败");
      return;
    } else {
        const workbook = new Excel.Workbook();
        await workbook.xlsx.load(file)
        
        // 第一个工作表
        const worksheet = workbook.getWorksheet(1);
        console.log('worksheet',worksheet);
        
        // 遍历工作表中的所有行（包括空行）
        const sheetData = [];
        worksheet.eachRow({ includeEmpty: true }, function(row, rowNumber) {
            // console.log('Row ' + rowNumber + ' = ' + JSON.stringify(row.values));
            // 使用row.values获取每一行的值时总会多出一条空数据(第一条)，这里我把它删除
            const row_values = row.values.slice(1);
            sheetData.push(row_values)
        });
        console.log('sheetData',sheetData);
        
    }
  };
  </script>